import React, { Component } from 'react'
import './Item.css'
export default class Item extends Component {
  render() {
    //从this.props上解构todo
    const {
      // 解构出来的todo,也是对象,继续解构
      todo: { id, todoName, isDone },
      delTodo,
      updateTodo,
    } = this.props

    return (
      <li>
        <label>
          {/* 当表单元素的值被控制,则必须要写一个onChange.否则会警告 */}
          <input
            type="checkbox"
            checked={isDone}
            onChange={function (e) {
              // console.log(e.target.checked) e.target.checked可以获取到目标值\
              updateTodo(id, e.target.checked)
            }}
          />
          <span className={isDone ? 'active' : ''}>{todoName}</span>
        </label>
        <button
          className="btn btn-danger"
          onClick={() => {
            delTodo(id)
          }}
        >
          删除
        </button>
      </li>
    )
  }
}
